<template>
    <div class="categoryPage">
        <!-- <div class="banner">
            <img src="/static/images/banner/category2.jpg" />
        </div> -->
        <div class="container">
            <div class="wrapleft">
                <div class="title">
                    <h1>{{ specialDetails.title }}</h1>
                </div>
                <ul class="specialList">
                    <li v-for="(item,key) in specialDetails.list || []" :key="key">
                        <nuxt-link :to="`/sentence/${item.id}`">{{key + 1}}、{{item.content}}</nuxt-link>
                    </li>
                </ul>
            </div>
            <div class="wrapright MobileHide">
                <div
                    class="siderBox"
                    :class="{acticeFlex: leaveHead}">
                    <sider-moudel></sider-moudel>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapMutations, mapGetters, mapActions} from 'vuex';
import scrollEvent from '~/mixins/scrollEvent';
import siderMoudel from '~/components/layout/siderMoudel.vue';
export default {
    name: 'special',
    layout: 'current',
    scrollToTop: true,
    validate({ params, query }) {
        let id = params.id
        let re = /^[0-9]+.?[0-9]*$/;
        if (id && re.test(id)) {
            return true;
        }
        return false;
    },
    head() {
        return {
            title: this.specialDetails.title,
            meta: [
                { hid: 'keywords', name: 'keywords', content: '句摘文学，句子迷，句子控，优美句子，励志句子' },
                { hid: 'description', name: 'description', content: '句摘文学，文艺青年的家' }
            ]
        }
    },
    mixins: [scrollEvent],
    async asyncData({ params, store }) {
        let SpecialId = params.id;
        await store.dispatch('sentence/getSpecialDetails', {
            id: SpecialId
        });
    },
    data() {
        return {

        }
    },
    components: {
        siderMoudel
    },
    computed: {
        ...mapGetters('sentence', ['specialDetails'])
    }
}
</script>
<style lang="stylus" scoped>
.categoryPage
    width 100%
    height auto
    .banner
        max-height 200px
        overflow hidden
        img
            width 100%
.specialList
    padding 10px
    background #ffffff
    li
        line-height 20px
        padding 5px
        margin-bottom 10px
        a
            font-size 14px
.title
    h1
        width 100%
        height 60px
        font-size 18px
        line-height 60px
        text-align center
        font-weight bold 
        
</style>
